<template>
  <el-dialog
    title="创建考核"
    width="80%"
    :before-close="handleClose"
    destroy-on-close
  >
    <el-form :model="form" label-width="120px" ref="formRef">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考核名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入考核名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考核类型" prop="type">
            <el-select
              v-model="form.type"
              placeholder="请选择考核类型"
              style="width: 100%"
            >
              <el-option label="理论考试" value="theory"></el-option>
              <el-option label="技能考核" value="skill"></el-option>
              <el-option label="综合评估" value="comprehensive"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开始日期" prop="startDate">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="选择开始日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="选择结束日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考试时长" prop="duration">
            <el-input
              v-model.number="form.duration"
              placeholder="请输入考试时长"
            >
              <template #append>分钟</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总分值" prop="totalScore">
            <el-input
              v-model.number="form.totalScore"
              placeholder="请输入总分值"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="及格分数" prop="passingScore">
            <el-input
              v-model.number="form.passingScore"
              placeholder="请输入及格分数"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考核描述" prop="description">
            <el-input
              type="textarea"
              v-model="form.description"
              placeholder="请输入考核描述"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      <el-form-item label="题目设置">-->
      <!--        <el-row :gutter="20" style="width: 100%">-->
      <!--          <el-col :span="8">-->
      <!--            <el-input v-model.number="form.singleChoiceCount">-->
      <!--              <template #prepend>单选题</template>-->
      <!--              <template #append>道</template>-->
      <!--            </el-input>-->
      <!--          </el-col>-->
      <!--          <el-col :span="8">-->
      <!--            <el-input v-model.number="form.multipleChoiceCount">-->
      <!--              <template #prepend>多选题</template>-->
      <!--              <template #append>道</template>-->
      <!--            </el-input>-->
      <!--          </el-col>-->
      <!--          <el-col :span="8">-->
      <!--            <el-input v-model.number="form.essayCount">-->
      <!--              <template #prepend>简答题</template>-->
      <!--              <template #append>道</template>-->
      <!--            </el-input>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-form-item>-->

      <!--      <el-row :gutter="20">-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="单选分值" prop="singleChoiceScore">-->
      <!--            <el-input v-model.number="form.singleChoiceScore">-->
      <!--              <template #append>分/道</template>-->
      <!--            </el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="多选分值" prop="multipleChoiceScore">-->
      <!--            <el-input v-model.number="form.multipleChoiceScore">-->
      <!--              <template #append>分/道</template>-->
      <!--            </el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item label="简答分值" prop="essayScore">-->
      <!--            <el-input v-model.number="form.essayScore">-->
      <!--              <template #append>分/道</template>-->
      <!--            </el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <!--      <el-form-item label="参与人员" prop="participants">-->
      <!--        <el-select-->
      <!--          v-model="form.participants"-->
      <!--          multiple-->
      <!--          placeholder="可按部门或角色选择，按住Ctrl键可多选"-->
      <!--          style="width: 100%"-->
      <!--        >-->
      <!--          <el-option label="内科护理组" value="dept1"></el-option>-->
      <!--          <el-option label="外科护理组" value="dept2"></el-option>-->
      <!--          <el-option label="急诊护理组" value="dept3"></el-option>-->
      <!--          <el-option label="ICU护理组" value="dept4"></el-option>-->
      <!--          <el-option label="新入职护士" value="role1"></el-option>-->
      <!--          <el-option label="护士长" value="role2"></el-option>-->
      <!--          <el-option label="主管护师" value="role3"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <!--      <el-form-item label="题目来源" prop="questionSource">-->
      <!--        <el-radio-group v-model="form.questionSource">-->
      <!--          <el-radio label="source-bank">从题库中选择</el-radio>-->
      <!--          <el-radio label="source-random">随机抽取</el-radio>-->
      <!--          <el-radio label="source-manual">手动添加</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveAsDraft">保存为草稿</el-button>
        <el-button type="primary" @click="createAndPublish"
          >创建并发布</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { modalControllers } from "@/stores/modalController.js";

const modalController = modalControllers();
const formRef = ref(null);
const form = reactive({
  name: "",
  type: "",
  startDate: "",
  endDate: "",
  duration: null,
  totalScore: null,
  passingScore: null,
  description: "",
  singleChoiceCount: 0,
  multipleChoiceCount: 0,
  essayCount: 0,
  singleChoiceScore: 5,
  multipleChoiceScore: 10,
  essayScore: 15,
  participants: [],
  questionSource: "source-bank",
});

const open = () => {
  dialogVisible.value = true;
};

const handleClose = () => {
  formRef.value.resetFields();
  modalController.closePopup("newAssessmentModal");
};

const saveAsDraft = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("保存为草稿:", form);
      ElMessage.success("考核已保存为草稿！");
      handleClose();
    } else {
      ElMessage.error("请检查表单项！");
      return false;
    }
  });
};

const createAndPublish = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("创建并发布:", form);
      ElMessage.success("考核已创建并发布！");
      handleClose();
    } else {
      ElMessage.error("请检查表单项！");
      return false;
    }
  });
};

defineExpose({
  open,
});
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
